<template>
  <z-paging ref="paging" v-model="dataList"
            @query="queryList"
            @onRefresh="onRefresh"
            :auto-hide-loading-after-first-loaded="false">
    <template #top>
      <view style="box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.06);z-index: 100">
        <u-navbar
            title="红包卡券"
            placeholder
            titleStyle="color:black"
            leftIconColor="#000"
            :customStyle="{backgroundColor: 'transparent'}"
            auto-back></u-navbar>
        <view class="tabs">
          <up-tabs :list="listMenu" :current="currentNum" @click="click" lineWidth="30" line-height="5"
                   lineColor="#f56c6c"
                   :scrollable="false"
                   :activeStyle="{color: '#FC7649',transform: 'scale(1.05)',fontSize: '27rpx',fontWeight: 'bold'}"
                   :inactiveStyle="{color: '#3D3D3D',transform: 'scale(1)',fontSize: '28rpx'}"
                   itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"></up-tabs>
          <view style="display: flex;height: 88rpx;align-items: center">
            <view v-for="(item,index) in listMenu1" :key="index" :class="item.isSelect?'item_menu_p':'item_menu'"
                  @click="tabChange(item,index)">
              {{ item.name }}
            </view>
            <view style="flex: 1"></view>
            <view style="display: flex;align-items: center;">
              <image class="yiwen" :src="BaseImgUrl + '/guanfan/home/why.png'" mode="widthFix" @click="show=true"
                     v-if="currentTabIndex ===1"/>
              <view style="font-weight: 400;font-size: 24rpx;color: #666666;line-height: 34rpx;" @click="show=true"
                    v-if="currentTabIndex ===1">红包使用规则
              </view>
            </view>
            <view style="margin-right: 20rpx" @click="show=true" v-if="currentTabIndex ===1"></view>
          </view>
        </view>
      </view>
    </template>
    <!-- 列表  -->
    <view class="orderTotal">
      <view style="margin-top: 13px"></view>
      <view v-for="(item, index) in dataList" :key="index" class="orderList">
        <view class="coupons_content" v-if="currentTabIndex === 0">
          <view class="coupons_top">
            <image :src="BaseURL + item.picture"></image>
            <view style="display: flex;flex-direction: column;margin-left: 20rpx;height: 108rpx">
              <view class="name" style="flex: 1">{{ item.title }}</view>
              <view class="date">{{ item.valid_date }}</view>
            </view>
            <view style="flex: 1"></view>
            <view class="go" @click="toUserPage(item)" v-if="item.status===0" style="position: relative">
              去使用
              <!-- #ifdef H5 -->
              <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" v-if="item.url && !item.cdkey"
                                    :username="item?.original_id"
                                    :path="item?.url"
                                    style="position: absolute;z-index: 89;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #1db9ff;">
                <component :is="'script'" type='text/wxtag-template'
                           style="display: block;background-color: #1db9ff; opacity: 1">
                  <div
                      style="position: absolute;top: 0; left: 0; width: 100%;height: 100%;background-color: #1db9ff; opacity: 1">
                  </div>
                </component>
              </wx-open-launch-weapp>
              <!-- #endif -->
            </view>
            <view class="go_use_no" v-else>
              {{ item.status === 1 ? '已使用' : '已过期' }}
            </view>
          </view>
          <view class="coupons_line">
          </view>
          <!-- class="u-reset-button u-cell__body"-->
          <view class="coupons_bottom">
            <up-collapse
                accordion
                :border="false">
              <up-collapse-item title="使用规则" :clickable="false" :border="false" :isLink="false">
                <template #title>
                  <text class="u-page__item__title__slot-title">使用规则</text>
                </template>
                <view class="use_rule">
                  {{ item.rule }}
                </view>
              </up-collapse-item>
            </up-collapse>
          </view>
        </view>
        <view v-else>
          <view :class="'item_content'">
            <view class="money_bg_content">
              <view style="position: relative">
                <image class="money_bg"
                       :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>
                <view class="money_text">
                  <text>{{ item.money }}</text>
                  <text style="font-size: 28rpx">元</text>
                </view>
              </view>
              <view style="width: 20rpx"></view>
              <view style="margin-top: 10rpx">
                <view style="font-size: 32rpx;color: #3D3D3D;font-weight: bold">{{ item.title }}</view>
                <view style="font-size: 24rpx;color: #888888;margin-top: 60rpx">
                  有效期至：{{ item.valid_date }}
                </view>
              </view>
              <view style="flex: 1"></view>
              <view class="go_use" @click="go_use" v-if="item.status===0">
                去使用
              </view>
              <view class="go_use_no" v-else>
                {{ item.status === 1 ? '已使用' : '已过期' }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <template #refresher>
      <view style="display: flex;justify-content: center;align-items: center;padding-top: 120rpx;">
        <image src="https://lsz.lszbg.com/imgs/logo_loading.gif" style="height:110rpx;width:110rpx;margin:auto}"></image>
      </view>
    </template>
    <template #empty>
      <XtxEmpty/>
    </template>
    <!-- 自定义的没有更多数据view -->
    <template #loadingMoreNoMore>
      <view style="font-size: 26rpx;color: #b4b4b4;text-align: center;box-sizing: border-box;padding: 40rpx 0;">
        没有更多数据
      </view>
    </template>
  </z-paging>

  <up-popup :show="show" mode="center" :round="10" @close="close" @open="open" closeable
            :safe-area-inset-bottom="false">
    <view class="box-content">
      <view class="title">红包使用须知</view>
      <view style="height: 1px;width:100%;background-color: #f4f0f0"></view>
      <view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center">
        <view class="content">
          <!--          <view>1.红包将在活动完成后<text style="color: #FC754A">额外返红包金额</text></view>-->
          <!--          <view>2.活动符合红包使用门槛时才可使用</view>-->
          <!--          <view>3.一单只能适用一张</view>-->
          <!--          <view>4.<text style="color: #FC754A">订单取消后不返还红包</text></view>-->
          <!--          <view>5.红包未在有效期内使用将被失效</view>-->
          <u-parse :content="redRule"></u-parse>
        </view>
      </view>
      <view style="height: 1px;background-color: #f4f0f0;margin: 0 30rpx"></view>
      <view style="display: flex;margin: 30rpx">
        <view class="know" @click="show = false">我已知晓</view>
      </view>
    </view>
  </up-popup>

  <up-popup :show="showUserTip" mode="center" :round="10" @close="close" @open="showUserTip = true;" closeable
            :safe-area-inset-bottom="false">
    <view class="box-content">
      <view class="title">卡券使用提示</view>
      <view style="height: 1px;width:100%;background-color: #f4f0f0"></view>
      <view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center">
        <view class="content" style="margin: 30rpx">
          <u-parse :content="pageData?.tip"></u-parse>
        </view>
      </view>
      <view style="height: 1px;background-color: #f4f0f0;margin: 0 30rpx"></view>
      <view style="display: flex;margin: 30rpx 30rpx 0">
        <view style="font-size: 22rpx;color: #000000;text-align: center;width: 100%">兑换码：{{ pageData?.cdkey }}</view>
      </view>
      <view style="display: flex;margin: 30rpx;position: relative">
        <view class="know" @click="toCopy">复制并前往兑换</view>
        <!-- #ifdef H5 -->
        <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch"
                              :username="pageData.original_id"
                              :path="pageData.path"
                              style="position: absolute;z-index: 89;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #1db9ff">
          <component :is="'script'" type='text/wxtag-template' style="display: block;">
            <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
          </component>
        </wx-open-launch-weapp>
        <!-- #endif -->
      </view>
    </view>
  </up-popup>
  <up-popup :show="showCopySuccess" mode="center" :round="10" @close="close" @open="showCopySuccess = true;" closeable
            :safe-area-inset-bottom="false">
    <view class="box-content">
      <view class="title">提示</view>
      <view style="height: 1px;width:100%;background-color: #f4f0f0"></view>
      <view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center">
        <view class="content" style="margin: 30rpx">
          复制成功，是否确认跳转寄小二？
        </view>
      </view>
      <view style="height: 1px;background-color: #f4f0f0;margin: 0 30rpx"></view>
      <view style="display: flex;margin: 30rpx">
        <view class="know" style="font-size: 26rpx">确认跳转</view>
        <!-- #ifdef H5 -->
        21312312
        <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                              :username="pageData.original_id"
                              :path="pageData.path"
                              style="position: absolute;z-index: 89;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #1db9ff;margin-top: 20rpx">
          <component :is="'script'" type='text/wxtag-template' style="display: block;">
            <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
          </component>
        </wx-open-launch-weapp>
        <!-- #endif -->
      </view>
    </view>
  </up-popup>
</template>

<script setup>
import {ref} from "vue";
import XtxEmpty from "../components/XtxEmpty.vue";
import {onLoad, onPageScroll, onReachBottom} from "@dcloudio/uni-app";
import useZPaging from "z-paging/components/z-paging/js/hooks/useZPaging";
import {BaseImgUrl, BaseURL} from "../utils/lshttp";
import {carRedAPI} from "../services/me";
import {toMiniAppRedPage} from "../utils/utils";
import CacheImage from "../components/CacheImage.vue";

const paging = ref(null)
let dataList = ref([])
useZPaging(paging)


// 创建响应式数据
const show = ref(false);
// 卡券使用提示
const showUserTip = ref(false);
// 复制卡券兑换码成功提示
const showCopySuccess = ref(false);
// 卡券红包类型
const type = ref(1)
// 卡券红包状态
const status = ref(0)
// 红包使用须知
const redRule = ref("")
// 菜单
const listMenu = ref([
  {name: '我的卡券'},
  {name: '我的红包'}
]);
// 二级菜单
const listMenu1 = ref([
  {name: '未使用', isSelect: true},
  {name: '已使用', isSelect: false},
  {name: '已过期', isSelect: false}
]);
onLoad((options) => {
  currentNum.value = options.current;
  console.log('options--->>>', options.current)
  if (options.current === 0){
    type.value = Number(options.current) + 1
    currentTabIndex.value = Number(options.current) + 1
  } else {
    type.value = Number(options.current) + 1
    currentTabIndex.value = Number(options.current) + 1
  }
})
// 定义方法
function open() {
  // 打开弹框逻辑，比如设置 show 为 true
  show.value = true;
  // console.log('open');
}
function close() {
  // 关闭逻辑，设置 show 为 false
  show.value = false;
  showUserTip.value = false;
  // console.log('close');
}
// 当前Tab下标
const currentTabIndex = ref(0)
// 点击菜单
const currentNum = ref(0)
function click(item) {
  console.log('item', item);
  currentTabIndex.value = item.index
  currentNum.value = item.index
  type.value = item.index + 1
  // 卡卷红包切换时，使用状态重置
  listMenu1.value[0].isSelect = true
  listMenu1.value[1].isSelect = false
  listMenu1.value[2].isSelect = false
  status.value = 0

  // 刷新列表数据
  paging.value?.refresh()
}
// Tab切换
const tabChange = (item, index) => {
  console.log('index=', index)
  listMenu1.value.forEach((item1) => {
    item1.isSelect = false
  })
  item.isSelect = true
  status.value = index
  paging.value?.refresh()
}
// 跳转页面数据
const pageData = ref()
// 去首页
const go_use = () => {
  uni.switchTab({url: '/pages/index/index'})
}
// 跳转到去其他页面
const toUserPage = (item) => {
  console.log(item)
  if (item.sub_type === 1) {
    uni.switchTab({url: '/pages/index/index'})
    return;
  }
  pageData.value = {
    appid: item.appid,
    original_id: item.original_id,
    path: item.url,
    tip: item.notice,
    cdkey: item.cdkey,
  }
  if (item.cdkey) {
    uni.setClipboardData({
      data: pageData.value.cdkey,
      showToast: false,
      success() {
        showUserTip.value = true
      }
    })
    return
  }
  console.log(pageData.value)
  toMiniAppRedPage(pageData.value)
}
// 跳转复制
const toCopy = () => {
  showUserTip.value = false
  // #ifdef APP-PLUS || MP
  toMiniAppRedPage(pageData.value)
  // #endif
}
// 获取数据源
const queryList = (pageNo, pageSize) => {
  // setTimeout(() => {
  //   paging.value?.complete(testData);
  // }, 1000)
  carRedAPI({
    type: type.value,
    status: status.value,
    limit: pageSize,
    page: pageNo
  }).then(res => {
    redRule.value = res.result.red_rule
    paging.value?.complete(res.result.list);
  }).catch(() => {
    paging.value?.complete(false);
  })
}
onPageScroll(e => {
})
onReachBottom(() => {
})
// 显示提示
const handleLaunch = () => {
  showUserTip.value = false
}
</script>

<style lang="scss">
page {
  background: #f4f4f6;
}

.u-page__item__title__slot-title {
  color: #777777;
  margin-left: -6rpx;
  font-size: 28rpx;
}
</style>
<style scoped lang="scss">
.tabs {
  padding: 0 10rpx;
  background-color: #FFFFFF;
  //box-shadow: #F6F6F6 0 2rpx 8rpx 2rpx;
}

.item_menu {
  margin-left: 20rpx;
  background-color: #F1F1F1;
  padding: 8rpx 28rpx;
  border-radius: 68rpx;
  color: #666666;
  font-size: 24rpx;
  box-shadow: 0 6rpx 3rpx #66666638;
}

.item_menu_p {
  margin-left: 20rpx;
  padding: 8rpx 28rpx;
  background: #FFF7ED;
  border-radius: 68rpx;
  color: #FC754A;
  font-size: 24rpx;
  box-shadow: 0 6rpx 3rpx #FC754A38;
}

.coupons_content {
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  margin: 0 20rpx 20rpx;
  //padding: 20rpx;
}

.coupons_top {
  display: flex;
  align-items: center;
  padding: 15px 15px 10px;

  image {
    width: 176rpx;
    height: 118rpx;
  }

  .name {
    font-weight: bold;
    font-size: 30rpx;
    color: #3D3D3D;
    line-height: 32rpx;
  }

  .date {
    font-weight: 400;
    font-size: 26rpx;
    color: #888888;
    line-height: 26rpx;
  }

  .go {
    text-align: center;
    font-weight: 400;
    font-size: 26rpx;
    color: #FFFFFF;
    line-height: 56rpx;
    width: 140rpx;
    height: 56rpx;
    background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    box-shadow: #FC754A56 0 0 10rpx 10rpx;
  }
}

.use_rule {
  font-size: 24rpx;
  color: #888888;
  line-height: 26px;
  letter-spacing: 4rpx;
  margin: -19px 2px -5px;
  padding-bottom: -30rpx;
}

.coupons_line {
  border: 2rpx #E1E1E1 dashed;
  margin: 0 16px;
}

.coupons_bottom {
  margin-top: -5px;
}

.item_content {
  z-index: 100;
  margin: 0 20rpx 20rpx;
  background-color: #FFFFFF;
  border-radius: 10rpx;
  padding: 20rpx;
}

.money_bg_content {
  position: relative;
  height: 158rpx;
  display: flex;

  .money_bg {
    width: 128rpx;
    height: 158rpx;
    position: absolute;
    z-index: 1;
  }

  .money_text {
    color: #ff5c14;
    font-weight: bold;
    font-size: 28rpx;
    z-index: 100;
    position: relative;
    width: 132rpx;
    text-align: center;
    line-height: 100rpx;
  }

  .go_use {
    font-weight: 400;
    font-size: 26rpx;
    color: #FFFFFF;
    text-align: center;
    width: 140rpx;
    height: 56rpx;
    line-height: 56rpx;
    margin-top: 38rpx;
    background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
  }
}

.go_use_no {
  font-weight: 400;
  font-size: 26rpx;
  color: #3D3D3D;
  text-align: center;
  width: 140rpx;
  height: 56rpx;
  line-height: 56rpx;
  margin-top: 38rpx;
  background: linear-gradient(270deg, #eaf0f1 0%, #f7f7fa 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
}

.yiwen {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.box-content {
  display: flex;
  flex-direction: column;
  width: 600rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  letter-spacing: 3rpx;

  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    line-height: 32rpx;
    text-align: center;
    padding: 28rpx 0;
  }

  .warning {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;

    image {
      width: 76rpx;
      height: 76rpx;
    }

    text {
      font-weight: bold;
      font-size: 36rpx;
      color: #FF5621;
      line-height: 36rpx;
    }
  }

  .content {
    margin: 30rpx 20rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    line-height: 56rpx;
  }

  .know {
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
    width: 560rpx;
    height: 80rpx;
    background: #FDB058;
    border-radius: 200rpx 200rpx 200rpx 200rpx;
  }
}
</style>
